forum

Home / DeveloperSection / Forums / What is event delegation in JavaScript, and why is it useful?

Ask Question
Steilla Mitchel

Steilla Mitchel

Follow
I completed my post-graduation in 2013 in the engineering field. Engineering is the application of science and math to solve problems. Engineers figure out how things work and find practical uses for scientific discoveries. Scientists and inventors often get the credit for innovations that advance the human condition, but it is engineers who are instrumental in making those innovations available to the world. I love pet animals such as dogs, cats, etc.

Can you answer this question?

Answer

1 Answers

Ashutosh Kumar Verma

Ashutosh Kumar Verma

25-Jun-2024

JavaScript Event Delegation

Event delegation in JavaScript is a way to add an event listener to a parent element that will respond to events in its children. Instead of adding event listeners to each child element, you use event bubbling (or capturing) to control events by focusing on the parent element.

Here’s why event delegation is useful,

Dynamic elements- When you dynamically add elements or elements added or removed from the DOM, event delegation ensures that these elements automatically respond to events without having to attach separate event listeners or removed at any time

Performance- This can improve performance because you can associate only one event listener to the parent object instead of multiple listeners to multiple child objects. This is especially evident in situations where there are many children's items.

Simplicity- Simplifies the code by limiting the number of listeners to manage. This can lead to cleaner and more maintainable code.

Handling bubbling- Event delegation uses event bubbling, where events triggered on nested elements bubble to the parent element. The parent element can then determine which child element caused the event by examining the event object.

Example-

Here is a basic example that demonstrates the event delegation in Angularjs

// HTML structure
<div id="parent">
   <button>Button 1</button>
   <button>Button 2</button>
   <button>Button 3</button>
</div>
// JavaScript
const parent = document.getElementById('parent');
parent.addEventListener('click', function(event) {
   if (event.target.tagName === 'BUTTON') {
       console.log('Button clicked:', event.target.textContent);
   }
});

In the example above

We attach an event listener to the parent element.
When a click event happens on any child button element, the event bubbles to the parent element.
The event listener then checks if the event target (event.target) is a button. If so, it performs a task (in this case, it records the contents of the button).

 

Also, Read: What is the difference between call, apply, and bind methods in JavaScript?

Liked By